<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./libs/icon-font/iconfont.css">
    <link rel="stylesheet" href="./libs/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/swiper.css">
</head>
<body>
    <header></header>
    <main>
        <div class="banner"></div>
        <div class="products">
            <div class="pro_header">
                <a class="a1">新品首发</a>
                <span>为你寻觅世间好物</span>
                <a href="" class="a2">更多新品 ></a>
            </div>
            <div class="swiper">
                <div class="swiper-wrapper">
                    <!-- 新品首发 -->
                    <div class="swiper-slide xuan1"></div>
                    <div class="swiper-slide xuan1"></div>
                    <div class="swiper-slide xuan1"></div>
                    <div class="swiper-slide xuan1"></div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <div class="recommend">
            <div class="con">
                <div class="header">
                    <div class="left">
                        <a href="" class="a1">人气推荐</a>
                        <a href="" class="a2">编辑推荐</a>
                        <a href="" class="a2">热销总榜</a>
                    </div>
                    <div class="right">
                        <a href="">更多推荐 ></a>
                    </div>
                </div>
                <!-- 人气推荐 -->
                <div class="pro xuan2"></div>
            </div>
        </div>


        <div class="index-case">
            <div class="index-case-con">
                <div class="header">
                    <div class="left">
                        <a href="">居家生活</a>
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="">办公椅/工学椅</a><b>/</b></li>
                            <li><a href="">秋冬款</a><b>/</b></li>
                            <li><a href="">四季款</a><b>/</b></li>
                            <li><a href="">床垫床褥</a><b>/</b></li>
                            <li><a href="">经典人气系列</a><b>/</b></li>
                            <li><a href="">被子/被芯</a><b>/</b></li>
                            <li><a href="" style="margin-right: 13px;">休闲椅/凳子</a></li>
                            <li><a href="">查看更多 ></a></li>
                        </ul>
                    </div>
                </div>
                <div class="banner1">
                    <a href="">
                        <img src="./img/bn1.webp" alt="">
                    </a>
                </div>
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <!-- 居家生活 -->
                        <div class="swiper-slide xuan3"></div>
                    </div>
                </div>
            </div>
        </div>


        <div class="index-case">
            <div class="index-case-con">
                <div class="header">
                    <div class="left">
                        <a href="">服饰鞋包</a>
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="">防晒系列</a><b>/</b></li>
                            <li><a href="">人气新品</a><b>/</b></li>
                            <li><a href="">女式T恤/POLO</a><b>/</b></li>
                            <li><a href="">男式衬衫</a><b>/</b></li>
                            <li><a href="">女式衬衫/西装</a><b>/</b></li>
                            <li><a href="">男式针织衫/卫衣</a><b>/</b></li>
                            <li><a href="" style="margin-right: 13px;">男式外套</a></li>
                            <li><a href="">查看更多 ></a></li>
                        </ul>
                    </div>
                </div>
                <div class="banner1">
                    <a href="">
                        <img src="./img/bn2.webp" alt="">
                    </a>
                </div>
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide xuan3"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="index-case">
            <div class="index-case-con">
                <div class="header">
                    <div class="left">
                        <a href="">美食酒水</a>
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="">肉食零食</a><b>/</b></li>
                            <li><a href="">茅台酒</a><b>/</b></li>
                            <li><a href="">饼干糕点</a><b>/</b></li>
                            <li><a href="">小食糖巧</a><b>/</b></li>
                            <li><a href="">坚果炒货</a><b>/</b></li>
                            <li><a href="">蜜饯果干</a><b>/</b></li>
                            <li><a href="" style="margin-right: 13px;">冲调饮品</a></li>
                            <li><a href="">查看更多 ></a></li>
                        </ul>
                    </div>
                </div>
                <div class="banner1">
                    <a href="">
                        <img src="./img/bn3.webp" alt="">
                    </a>
                </div>
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide xuan3"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="index-case">
            <div class="index-case-con">
                <div class="header">
                    <div class="left">
                        <a href="">个护清洁</a>
                    </div>
                    <div class="right">
                        <ul>
                            <li><a href="">基础护肤</a><b>/</b></li>
                            <li><a href="">彩妆修容</a><b>/</b></li>
                            <li><a href="">爆款榜单</a><b>/</b></li>
                            <li><a href="">卸妆洁面</a><b>/</b></li>
                            <li><a href="">口腔护理</a><b>/</b></li>
                            <li><a href="">新品尝鲜</a><b>/</b></li>
                            <li><a href="" style="margin-right: 13px;">护肤工具</a></li>
                            <li><a href="">查看更多 ></a></li>
                        </ul>
                    </div>
                </div>
                <div class="banner1">
                    <a href="">
                        <img src="./img/bn4.webp" alt="">
                    </a>
                </div>
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide xuan3"></div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer></footer>
    <!-- <script src="./libs/require.js" data-main="js/require_index"></script> -->


    <script src="./libs/jquery/jquery.min.js"></script>
    <script>
        $('header').load('/html/header.html',()=>{
            let shopspan = document.querySelector('.shopspan')
            let list = JSON.parse(localStorage.getItem('cart')) || []
            let num = 0
            list.forEach(item=>{
                num += item.cart_number - 0
            })
            shopspan.innerHTML = num
        })
        $('footer').load('/html/footer.html')
    </script>
    <script src="./libs/swiper/swiper-bundle.min.js"></script>
    <script src="./js/swiper1.js"></script>
    <script src="./js/data_index1.js"></script>
</body>
</html>